


$('.titleul li').click(function () {
    $(this).addClass('on').siblings().removeClass('on')
        .closest('.titleul ').siblings('.record-content').find('div')
        .eq($(this).index()).addClass('active').siblings().removeClass('active')
})


// 1.用户框图标显示与隐藏
let user = document.querySelector('#user')
let pwd = document.querySelector('#pwd')

let del = document.querySelector('#del')

user.addEventListener('input',function(){
    // console.log(user)

    let len = user.value.length//用户名长度
    // console.log(len)
     
    //判断
    if( len > 0 ){
        del.style.display = 'block' 
    }else{
        del.style.display = 'none' 
 
    }

})
// 1.1 密码框图标显示与隐藏
let eyes = document.querySelector('#eyes')

pwd.addEventListener('input',function(){
    // console.log(user)

    let len = pwd.value.length//用户名长度
    // console.log(len)
     
    //判断
    if( len > 0 ){ 
        eyes.style.display = 'block' 
    }else{
        eyes.style.display = 'none' 
    }
})


// 2.点击删除图标删除用户名
del.addEventListener('click',function(){
    user.value = ''
    del.style.display = 'none' 
})


// // 3.点击眼睛图标按钮，眼睛图标睁开，显示密码

let count = 0;

eyes.addEventListener('click',function(){

count++

if( count % 2 ===0 ){
    eyes.src = './imgs/open.png'
    pwd.type = 'test'
}else{
    eyes.src = './imgs/close.png'
    pwd.type = 'password'
}

})




/*定义标杆*/

let formFloge = {
   user:false,//用户名标杆
   pwd:false,//密码标杆
}


// 4.判断密码和用户名是否合法

user.addEventListener('blur',function(){

    //4.1制定规则
    let age = /^[a-zA-Z]\w{5,11}&/
    
    //获取用户名
    let Uval = user.value

    //验证是否合法
    let result = age.test(uVal)

    //判断
    if( result ){
        userMsg.textContent = ''
    }else{
        user.userMsg = '6-12位字母开头，后面跟字母，数字下划线'
        user.style.border = '1px solid red'
    }

})

pwd.addEventListener('blur',function(){

    //1.创建验证规则-正则表达式
    let reg = /^[a-zA-Z]\w{5,11}$/

    //获取用户密码
    let pVal = pwd.value
    // console.log(pVal)

    //验证
    let result = reg.test(pVal)//true=符合 calse=不合法

    //判断
    if(result){
        pwdMsg.textContent = ''
        formFloge.pwd = true
    }else{
        pwdMsg.textContent = '6-12位字母开头，后面跟字母，数字下划线'
        pwd.style.border = '1px solid red'
        formFloge.pwd = false
    }
    
})

/**
 * 点击登录按钮，判断用户名和密码的合法性
 */
let btn = document.querySelector('#btn')

btn.addEventListener('click',function(){

    if( formFloge.user === false ){

        userMsg.textContent = '6-12位字母开头，后面跟字母，数字下划线'
        user.style.border = '1px solid red'

    }else if(formFloge.pwd === false){

        pwdMsg.textContent = '6-12位字母开头，后面跟字母，数字下划线'
        pwd.style.border = '1px solid red'

    }else{
        location.href = ''
    }


})

// let dBtn = document.querySelector('#dBtn')
// let img = document.querySelector('#img')
// let active = document.querySelector('#active')


// dBtn.addEventListener('click',function(){
//     img.style.display = 'block'
//     active.style.display = 'none'
// })